前面提到我們可以使用document.querySelector()來進行元素的操作，假設我們想要操作某個元素的文字內容，將它從原來的Hello World改成Good Morning，而這個元素的class是message，方法如下：

console.log(document.querySelector(".message").textContent);
// Hello World

document.querySelector(".message").textContent = "Good Morning";
console.log(document.querySelector(".message").textContent);
// Good Morning

在document.querySelector()括號中的message前面有一個點符號是因為它是class，假如是id的話，就要使用#加上id名稱。

我們也可以撰寫一段程式碼，讓這些程式碼對DOM中發生的事件做出反應，這邊我們會需要監聽事件，事件就是網頁上所發生的東西，像是點擊滑鼠、移動游標之類的都是事件，監聽事件讓我們的程式碼可以等待某個事件發生之後，對該事件做出反應。

為了監聽事件，我們要先看事件會在哪個元素上發生，並選擇出該元素，假設我們要監聽某個按鈕元素上的事件，這個按鈕元素的class是btn，我們先將按鈕元素選出來後，再使用addEventListener這個方法來監聽事件，雖然不只一種方式可以用來監聽事件，但這是最常被使用的：

document.querySelector(".btn").addEventListener("click", function() {
  document.querySelector(".message").textContent = "You clicked the button";
});

我們需要在addEventListener()中傳入兩個參數：分別是事件的類型以及對該事件的反應。
在上述例子中事件的類型是click，而對該事件的反應則是一個函數，當click發生後就會執行函數中的程式碼。